<template>
    <div style="display: flex;justify-content:space-around">
        <el-card class="box-card" style="width: 820px">
            <el-table
                    v-loading="loading"
                    :data="emprms"
                    border
                    stripe
                    size="small"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="empName"
                        label="员工名称"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="empWorkID"
                        label="员工工号"
                        width="100">
                </el-table-column>
                <el-table-column
                        label="调动前部门"
                        width="150"
                        prop="beforeDep.name">
                </el-table-column>
                <el-table-column
                        label="调动后部门"
                        width="150"
                        prop="afterDep.name">
                </el-table-column>
                <el-table-column
                        prop="removeDate"
                        label="调动日期"
                        width="120">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: center;margin-top: 10px">
                <el-pagination
                        background
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </el-card>
        <div class="block" style="width: 400px">
            <el-timeline v-for="(item,index) in emprms.slice(0,3)" :key="index">
                <el-timeline-item :timestamp="item.removeDate" placement="top">
                    <el-card>
                        <h4>部门调动情况</h4>
                        <span style="display: flex;justify-content: flex-start;align-items: center">
                            <div>{{item.empName}}从</div>
                            <div>
                                <strong>{{item.beforeDep.name}}</strong>
                            </div>
                            <div>调整到</div>
                            <div>
                                <strong>{{item.afterDep.name}}</strong>
                            </div>
                        </span>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </div>
    </div>
</template>

<script>
    export default {
        name: "departmentRemove",
        data() {
            return {
                emprms: [],
                loading: false,
                pageSize:10,
                pageNo:1,
                total:10,
            }
        },
        mounted() {
            this.getAllEmpRms();
        },
        methods: {
            getAllEmpRms() {
                this.loading = true;
                this.getRequest("/personnel/remove/?pageNo=" + this.pageNo + "&pageSize=" + this.pageSize).then(resp => {
                    this.loading = false;
                    if (resp) {
                        this.emprms = resp.data;
                        this.total = resp.total;
                    }
                })
            },
            handleDelete(data) {
                this.$confirm('此操作将永久删除' + data.removeDate + '【' + data.empName + '】的部门调动记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/personnel/remove/" + data.id).then(resp => {
                        if (resp) {
                            this.getAllEmpRms();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            sizeChange(currentSize) {
                this.pageSize = currentSize;
                this.getAllEmpRms();
            },
            currentChange(currentNo){
                this.pageNo = currentNo;
                this.getAllEmpRms();
            }
        }
    }
</script>

<style>
    body .el-table th.gutter {
        display: table-cell !important
    }
</style>
